<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>tinymce for alimail demo</title>
    <link rel="stylesheet" type="text/css" href="styles/layout.css"/>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="tinymce4/tinymce.js"></script>
    <style type="text/css">
        button {
            margin: 0 5px 0 0;
        }

        .x {
            padding: 10px 30px 0 30px;
        }
    </style>
</head>
<body>
<div style="font-weight: bold;padding: 10px 10px 0 10px;">
    <ol>
        <li>
            alimail开发了4个插件emotionsv2、tablev2（代替table）、formlink（代替link）、imageuploader，这4个插件使用了alimail的框架，无法共享给其他应用
        </li>
        <li>
            example里使用了官方的link、table插件，没有进行改动，请自己做下国际化
        </li>
        <li>
            tinymce和jQuery耦合的，因为必须要用到jQuery的几个函数
        </li>
        <li>
            已经在代码上加了注释，请查看index.html源码
        </li>
    </ol>
</div>
<div class="x">
    <button onclick="getContent();">getContent</button>
</div>
<div style="padding: 10px 30px 30px 30px;">
    <div id="demo1"></div>
</div>
<div id="tinymce_helper" style="display: none;">
    <iframe src="javascript:document.open();document.close();"></iframe>
</div>
<script type="text/javascript">

    function $M(key) {
        //这个函数在alimail这边是获取国际化的值
    }

    function getContent() {
        alert(window.editor.getContent());
    }

    var plugins = [
        "advlist", "autolink", "lists", "hr", "togglemore",
        "textcolor", "insertdatetime", "link", "table", "paste", "fullscreen"
    ];

    var toolbar_1 = [
        "fullscreen undo redo", "fontselect fontsizeselect",
        "bold italic underline strikethrough removeformat",
        "forecolor backcolor", "imageuploader emoticons togglemore"
    ];
    var toolbar_2 = [
        "alignleft aligncenter alignright alignjustify",
        "bullist numlist outdent indent", "link unlink", "table hr inserttime"
    ];

    tinymce.init({
        selector: "#demo1",
        theme: "modern",
        height: 400,
        resize: true, //是否可以鼠标拖动编辑器改变大小
        border_width: 1,//编辑器的边框宽度，alimail有两种情况，编辑写信是1，设置签名是没有边框的编辑器，所以设置了0
        target_list: false,
        convert_urls: false, //当你insertContent的时候，取消一些节点src的转换
        visual: false, //table的虚框是否显示，由于大文本设置虚框很耗性能，所以取消掉
        keep_values: false,//必须设置false用来提高性能
        forced_root_block: 'div', //当空文本的时候，tinymce会设置一个根节点，默认是P，我们要改成div比较合理
        show_system_default_font: true, // 是否开启系统字体的探测，alimail这边是开启的，这个是alimail新增的功能。
//        content_style : aym.global.HtmlTemplateCache.getTemplate('editorContentCss'),//alimail 这边是直接设置文本进去的，content_css是ajax加载的，效果一样，设置文本节省一个请求
        content_css: "tinymce4/styles/editorContentCss.css",
//        local_image : true,//alimail 插件使用的
//        attach_owner : aym.global.UserData.getEmail(),//alimail 插件使用的
        plugins: plugins,
        toolbar_1: toolbar_1.join(" | "),
        toolbar_2: toolbar_2.join(" | "),
//        default_style_fun : aym.util.getDefaultFontStyle, //alimail 使用的 ，获取默认字体styles的function
//        render_empty_fun : aym.util.renderEmptyNodeWithDefaultFontStyle,//alimail 使用的 ，获取默认字体的div文本的function
        init_instance_callback: function () { //初始化成功后的回调，alimail这里做了比较多的事情，参考代码
            window.editor = this;
//            _self._afterEditorInitialized.call(_self, this);
        },
        menu_class: "aym_scroll mce-y-scroll", //下拉菜单的样式，alimail这边主要是设置滚动条的样式，比如字体下拉菜单
        iframe_class: "aym_scroll aym_scroll_auto", //iframe的样式，alimail这边主要是设置滚动条的样式
        full_screen_compute_top_fun: function () {//全屏的时候，alimail这边页面最上面有广告的，所以全屏的时候不能挡住广告，所以搞个计算top的function
            var top = "0px", oWrapNode = $(".aym_page_wrap");
            if (oWrapNode.length > 0) {
                top = oWrapNode.offset().top + "px";
            }
            return top;
        },
        cssFiles: [
            "styles/skin.css",
            "styles/skin-ext.css"
        ],
        i18n_messages: {   //国际化
            //tinymce.js
            "default.font": $M("editor.core.font.default"),
            "button.bold": $M("editor.button.title.bold"),
            "button.italic": $M("editor.button.title.italic"),
            "button.underline": $M("editor.button.title.underline"),
            "button.strikethrough": $M("editor.menu.title.strikethrough"),
            "button.outdent": $M("editor.button.title.indent.decrease"),
            "button.indent": $M("editor.button.title.indent.increase"),
            "button.horizontal.line": $M("editor.menu.title.horizontal.line"),
            "button.remove.format": $M("editor.menu.title.clear.format"),
            "button.align.left": $M("editor.button.title.align.left"),
            "button.align.center": $M("editor.button.title.align.center"),
            "button.align.right": $M("editor.button.title.align.right"),
            "button.align.justify": $M("editor.button.title.align.justify"),
            "button.undo": $M("editor.button.title.undo"),
            "button.redo": $M("editor.button.title.redo"),
            "font.family.list": "宋体=simsun;黑体=simhei;楷体=kaiti;隶书=隶书;幼圆=幼圆;微软雅黑=microsoft yahei" + ";" + "Arial=arial;Arial Black=arial black;Book Antiqua=book antiqua;Calibri=calibri;Comic Sans MS=comic sans MS;Courier New=courier new;Garamond=garamond;Georgia=georgia;Helvetica=helvetica;Impact=impact;Narrow=narrow;Sans Serif=sans-serif;Serif=serif;Symbol=@symbol;Tahoma=tahoma;Times New Roman=times new roman;Trebuchet MS=trebuchet MS;Verdana=verdana;Webdings=@webdings;Wide=wide;Wingdings=@wingdings",
            "button.font.family": $M("editor.button.title.font.family"),
            "font.size.list": "10px;13px;14px;16px;18px;24px;32px;48px",
            "button.font.size": $M("editor.button.title.font.size"),

            //advlist/plugin.js
            "button.number.list": $M("editor.button.title.number.list"),
            "number.default": $M("editor.menu.title.default"),
            "number.lower.alpha": $M("editor.menu.title.number.lower.alpha"),
            "number.lower.greek": $M("editor.menu.title.number.lower.greek"),
            "number.lower.roman": $M("editor.menu.title.number.lower.roman"),
            "number.upper.alpha": $M("editor.menu.title.number.upper.alpha"),
            "number.upper.roman": $M("editor.menu.title.number.upper.roman"),
            "button.bullet.list": $M("editor.button.title.bullet.list"),
            "bullet.default": $M("editor.menu.title.default"),
            "bullet.circle": $M("editor.menu.title.bullet.circle"),
            "bullet.disc": $M("editor.menu.title.bullet.disc"),
            "bullet.square": $M("editor.menu.title.bullet.square"),

            //togglemore/plugin.js
            "button.toggle.more": $M("editor.button.title.toggle.more"),

            //emotionsv2/plugin.js is only for alimail
            "button.emotion": $M("editor.button.title.emotion"),

            //formlink/plugin.js is only for alimail
            "button.link.insert.edit": $M("editor.button.title.link.insert.edit"),
            "button.link.remove": $M("editor.button.title.link.remove"),

            //fullscreen/plugin.js
            "button.fullscreen": $M("editor.button.title.fullscreen"),

            //imageuploader/plugin.js is only for alimail
            "button.image": $M("editor.button.title.image"),
            "imageuploader.local": $M("editor.plugin.imageuploader.local"),
            "imageuploader.network": $M("editor.plugin.imageuploader.network"),

            //insertdatetime/plugin.js
            "button.date.time": $M("editor.menu.title.date.time"),

            //textcolor/plugin.js
            "button.text.color": $M("editor.button.title.text.color"),
            "button.background.color": $M("editor.button.title.background.color")

            //tablev2 plugin is only for alimail and has too much text, so write i18n text in plugin js file
        }
    });
</script>
</body>
</html>